@theme-color:#02b8fa;
@fontcolor:#b8babc;

a {
    text-decoration: none;
    color: @fontcolor;
}
.signIn{
    width: 100%;
    height: 330px;
    display: flex;
    flex-flow: column wrap;
    // border: 1px solid red;
    box-shadow: 0px 1px 5px 1px @theme-color;
    .signInBackground{
        height: 127px;
        background-color: #3868ff;
        filter: blur(2px);
    }
    .signInForm{
        flex:1;
        display: flex;
        .left,.right {
            width: 80px;
        }
        .center{
            flex:1;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            position: relative;
            img {
                
                position: absolute;
                top: -25px;        
                left:calc(50% - 25px);       
                height: 50px;
                width: 50px;
                border-radius: 25px;
                border:2px solid #b4b4f9;
            }
            input{
                padding: 0;
                height: 26px;
                margin: 5px 0;
                line-height: 26px;
                background-color: #f7f7f7;
                border: transparent;
                border-bottom: 1px solid @fontcolor;
            }
            input:last-child{
                background-color:@theme-color;
                color: #fff;
                cursor: pointer;
            }
            input:hover{
                
                border-bottom: 1px solid @theme-color;
            }
            .signInSelect {
                height: 26px;
                font-size: 8px;
                line-height: 26px;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                div{
                    color: @fontcolor;
                    display: flex;
                    align-items: center;
                    input[type=checkbox]{
                        background:red;
                    }
                }
            }
        }
    }
}

.user {
    header{
        height: 100px;
        border: 1px solid pink;
        border-radius: 14px;
        margin: 10px;
        div {
            margin: 10px;
            display: flex;
            align-items: flex-end;
            img {
                width: 50px;
                height: 50px;
                border-radius: 25px;
            }
        }
    }
    body {
        ul,li{
            margin: 0;
            padding: 0;
        }
        .userFirst{
            border: 1px solid pink;
            margin: 10px;
            border-radius: 14px;
        }
        li {
            display: flex;
            height: 36px;
            line-height: 36px;
            margin: 0 10px;
            justify-content: space-between;
            position: relative;
            .userInfo {
                position: absolute;
                left: 30px;
            }
        }
        


    }
    footer {
        
        border: 1px solid pink;
        margin: 10px;
        border-radius: 14px;
        margin: 10px;
        span {
            height: 36px;
            line-height: 36px;
            margin: 0 10px;
        }
    }
}